<template>
  <div>
    <main>
      <van-nav-bar :fixed="true" title="本店推荐" left-text="返回" left-arrow @click-left="onClickLeft" />
      <div class="total">
        <router-link tag="dl" v-for="(item,i) in product" :to="'/detail/'+item._id" :key="i">
          <dt>
            <img :src="item.coverImg" alt />
          </dt>
          <dd class="van-ellipsis">崇{{item.name}}</dd>
          <dd>已售{{item.price*10}}</dd>
          <p>{{item.price}}分钟配送&nbsp;&nbsp;配送￥3</p>

          <dd>
            <b>￥{{item.price}}</b>/斤
          </dd>
          <dd>
            <span>￥{{item.price+5}}</span>
            <van-icon name="add" />
          </dd>
        </router-link>
      </div>
    </main>
  </div>
</template>

<script>
import * as api from "@/api/getProlist";
export default {
  name: "Superm_shop",
  data() {
    return {
      title: "超市",
      product: ""
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    }
  },
  mounted() {
    api
      .getProlist({ product_category: this.$route.params.id, per: 30 })
      .then(data => {
        console.log(data.data.products);
        this.product = data.data.products;
      });
  }
};
</script>
    
<style scoped>
main {
  margin: 0;
  padding: 0 16px;
}
main .van-nav-bar {
  margin-top: -3px;
}
main .van-nav-bar .van-icon {
  margin-left: -12px;
}
main .total {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
  margin-top: 50px;
}
main .total dl {
  width: 166px;
  box-shadow: 0 0 10px #eee;
  box-sizing: border-box;
  padding-bottom: 8px;
  margin-bottom: 10px;
}
main .total dl dt {
  text-align: center;
}
main .total dl p {
  font-size: 10px;
  color: #666;
  line-height: 20px;
}
main .total dl dt img {
  width: 100%;
  background: #eee;
}
main .total dl dt {
  margin-bottom: 14px;
}
main .total dl dd:nth-of-type(1) {
  font-size: 16px;
  color: #333;
  line-height: 22px;
}
main .total dl dd:nth-of-type(2) {
  font-size: 10px;
  color: #666;
  line-height: 20px;
}

main .total dl dd:nth-of-type(3) b {
  color: #fb6532;
  font-size: 14px;
}
main .total dl dd:nth-of-type(4) {
  display: flex;
}
main .total dl dd:nth-of-type(4) span {
  display: block;
  margin-left: 50px;
  font-size: 12px;
  text-decoration: line-through;
}
main .total dl dd:nth-of-type(4) .van-icon {
  margin-left: 50px;
  font-size: 28px;
  color: #fb6532;
}
</style>